<template>
  <li>
    <label>
      <!-- <input type="checkbox" v-model="todo.done" /> -->

      <input
        type="checkbox"
        :checked="todo.done"
        @change="checkedHandler(todo.id)"
      />

      <span>{{ todo.title }}</span>
    </label>
    <button class="btn btn-danger" @click="DelHandler(todo.id)">删除</button>
  </li>
</template>

<script>
export default {
  name: "MyItem",
  // 声明接收 todo
  props: ["todo", "deleteTodo", "checkedTodo"],
  methods: {
    DelHandler(id) {
      if (confirm("是否要删除此项")) {
        this.deleteTodo(id);
      }
    },
    checkedHandler(id) {
      this.checkedTodo(id);
    },
  },
};
</script>

<style scoped lang="less">
/*item*/
li {
  list-style: none;
  height: 36px;
  line-height: 36px;
  padding: 0 5px;
  border-bottom: 1px solid #ddd;

  label {
    float: left;
    cursor: pointer;

    input {
      vertical-align: text-bottom;
      margin-right: 6px;
    }
  }

  button {
    float: right;
    display: none;
    margin-top: 3px;
  }

  &:before {
    content: initial;
  }

  &:last-child {
    border-bottom: none;
  }

  &:hover {
    background-color: #ddd;
  }

  &:hover button {
    display: block;
  }
}
</style>
